<template>
  <div class="personal_box knife_container">
    <el-row :gutter="20">
      <el-col :span="4" class="nav_list" >
        <div class="title">
          <span class="">帮助中心</span>
        </div>
        <ul class="alink">
          <router-link tag="li" :to="{name:'Problem'}">常见问题</router-link>
        </ul>
         <div class="title">
          <span class="">通知公告</span>
        </div>
        <ul class="alink">
          <router-link tag="li" :to="{name:'Notice', params: {type: 'website'}}">网站公告</router-link>
          <router-link tag="li" :to="{name:'Notice', params: {type: 'industry'}}">行业资讯</router-link>
          <router-link tag="li" :to="{name:'Notice', params: {type: 'companyInfo'}}">公司资讯</router-link>
        </ul>
      </el-col>
      <el-col :span="20" >
        <div class="person_content">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </el-col>
    </el-row>
  </div>  
</template>

<script>
  import {Row, Col} from 'element-ui'
  export default {
    components: {
      elRow: Row,
      elCol: Col
    }
  }
</script>

<style lang="scss" scoped>
  .personal_box{
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .nav_list{
    padding-bottom: 20px;
    li, .title{
      width: calc( 100% - 40px);
    }
    .title {
      position: relative;
      display:inline-block;
      font-size: 16px;
      color: #333333;
      margin-bottom: 15px;
      background: #f0f0f0;
      line-height: 50px;
      padding-left: 40px;
      &::before{
        position: absolute;
        width: 3px;
        height: 16px;
        background: #FFCC00;
        content: "";
        left: 0;
        top: 16px;
      }
    }
  }
  .alink{
      background: #FFFFFF;
      padding-left: 40px;
      margin-bottom: 20px;
      li{
        list-style-type:square;
        color: #a5a3a3;
        font-size: 14px;
        line-height: 50px;
        cursor: pointer;
        &.router-active{
          color: #FF7300;
        }
      }
      
      a{
        font-size: 14px;
        color: #858585
      }
    }
  .person_content{
    background: #FFFFFF;
    border-radius: 2px;
    padding: 25px;
    min-height: 550px;
  }
</style>
